<template>
	<el-drawer title="日志详情" v-model="visible" :size="700" destroy-on-close @closed="$emit('closed')">
		<el-main>
			<el-descriptions :column="1" border size="small">
				<el-descriptions-item label="用户名">{{ data.username }}</el-descriptions-item>
				<el-descriptions-item label="请求ip">{{ data.requestIp }}</el-descriptions-item>
				<el-descriptions-item label="请求地点">{{ data.requestLocation }}</el-descriptions-item>
				<el-descriptions-item label="登录时间">{{ data.loginTime }}</el-descriptions-item>
				<el-descriptions-item label="状态">{{ data.successFlag ? '成功' : '失败' }}</el-descriptions-item>
			</el-descriptions>
			<el-collapse v-model="activeNames" style="margin-top: 20px;">
				<el-collapse-item title="响应体" name="responseMsg">
					<el-input type="textarea" autosize v-model="data.responseMsg" class="code" disabled></el-input>
				</el-collapse-item>
			</el-collapse>
		</el-main>
	</el-drawer>
</template>

<script>
export default {
	data() {
		return {
			visible: false,
			activeNames: ['responseMsg'],
			data: {
				username: null,
				requestIp: null,
				requestLocation: null,
				loginTime: null,
				successFlag: null,
				responseMsg: null
			}
		}
	},
	methods: {
		setData(data) {
			this.visible = true;
			Object.assign(this.data, data);
		}
	}
}
</script>

<style scoped>
.code {
	font-size: 12px;
	border-radius: 4px;
}
</style>
